<template>
	<div class="softbypass">
		<div class="page-title">
			<h3>软件bypass</h3>
			<ul class="oper-butn">
				<li class="seleAll" data-placement="bottom" v-on:click='seleAll()' v-if='show'>	
					<img src="../../../img/selectall.png">
					<span>全选</span>
				</li>
				<li v-on:click='cancelAll()' v-else>
					<img src="../../../img/cancel.png" />
					<span>取消全选</span>
				</li>
				<li @click='addbypass()'>
					<img src="../../../img/add.png" />
					<span>新增</span>
				</li>
				<li v-on:click='rmMsg()' class="deletetag" data-placement="bottom">				
					<img src="../../../img/delete.png" />
					<span>删除</span>
				</li>				
				
			</ul>
		</div>
		<div class="content">
			<ul class="roadul" v-if="items.length > 0 ">
				<transition-group name="list">
					<li v-for='(item ,index) in items'  v-bind:key="item">
						<p class="roads">线路{{item}}</p>
						<span class="isbypass">bypass</span><br />
						<input type="checkbox"><span class="dele" @click="rmOne(item)">删除</span>
					</li>
				</transition-group>
			</ul>
			<p v-else class="no-data">暂未设置软件bypass，请添加。</p>
		</div>
		<Modals :id ="'bypassmodal'" :title ="name" :field = 'field' :collectField = "collectField"
          :status = "result" :errorMsg="errorMsg" :type="type"
          :selectedItems="selectedItems" :editData = "edit_data"  @sentErrorMsg = "getErrorMsg"
          @modalEvent ="modalEvent"></Modals>
	</div>
</template>
<script>
	import SystemService from 'services/systemService'
	import Modals from 'components/common/Modals'
	export default {
		components: {
			Modals
		},
		data() {
			return {
				transfer:true,
				name:'软件bypass',
				type:'add',
				items:[],
                show: true,
				allroutes:[],
				result:'',
                errorMsg:'',
				selectedItems:[],
				field:[{
					type:'select',
					label:'选择线路',
					emums:[],
					name:'group',
					requried:true,  
					remark:'*必选'  
				}],
				edit_data:{
					group:null	
				},
				collectField:'group'
			}
		},
		mounted() {
			this.getBypass()
			this.getGroups()
		},
        methods: {
        	reset() {
				this.result = ''
				this.errorMsg = ''
				$('.modal input').val('').css('border', '1px solid #e8e8e8')
				$('.modal textarea').val('').css('border', '1px solid #e8e8e8')
				$('.mi').css('color', '#d2d2d2')
				$('.notice').hide()
				$('.inputs_wrap .error_foramt').removeClass('error_foramt')
			},
			getErrorMsg(msg) {
                this.errorMsg = msg
            },
			getBypass() {
				let bypass={
					oper:"look",
					group:[]
				}
				SystemService.doBypass(bypass)
				.then((res) => {
					
					if (res.errcode === 0) {
						this.items = res.data
					}
				})
			},
			getGroups() {
				SystemService.getLine()
				.then((res) => {
					
					if (res.errcode === 0) {
						this.allroutes = res.data
						this.field[0].emums = res.data.map((item)=>{
							return '线路' + item
						})
					}
				})
			},
			rmOne(index) {
				let del={
					oper:"del",
					group:index
				}
				this.remove(del)
			},
			rmMsg() {
				this.reset()
				let hash_arr = new Array();
                $(":checkbox").each(function(i,e) {
                    if ($(e).prop("checked")) {
						let Str = $(e).parent().find("p")['0'].innerHTML
						let Char = Str.substring(2,Str.length)
                        hash_arr.push(Char);
                    };            
                });
				this.selectedItems=hash_arr
                if (hash_arr.length == 0) {
                    this.popoverShow('.deletetag', "请选择删除内容")
                } else {
					this.type='del'
                    $('#bypassmodal').modal('show')
                }
            },
			rmMore() {
				let hash_arr = new Array();
                $(":checkbox").each(function(i,e) {
                    if ($(e).prop("checked")) {
						let Str = $(e).parent().find("p")['0'].innerHTML
						let Char = Str.substring(2,Str.length)
                        hash_arr.push(Char);
                    };            
                });
				let delmore = {
                    oper:"del",
                    group:this.arr2string(hash_arr)
               };
                this.remove(delmore)
			},
			seleAll() {
				let hash_arr = new Array();
                $(":checkbox").each(function(i,e) {
                    if (e) {
						let Str = $(e).parent().find("p")['0'].innerHTML
						let Char = Str.substr(Str.length-1,1)
                        hash_arr.push(Char);
					}   
                });
				this.selectedItems=hash_arr
                if (hash_arr.length != 0) {
					$(":checkbox").prop("checked", true)
					this.show = false
				} else {
					this. popoverShow('.seleAll', '没可选内容')
				}
			},
			cancelAll() {
				$(":checkbox").prop("checked", false)
				this.show = true
				this.selectedItems=[]
			},
			remove(bypass) {
				this.result = 'ing'
				SystemService.doBypass(bypass)
				.then((res) => {
					
					if (res.errcode === 0) {
						 this.result = 'ok'
						$(":checkbox").prop("checked", false)
						this.show = true	
						this.getBypass()				
                    } else {
                        this.result = 'error'
                        this.errorMsg = res.errorMessage
                    }	
				})
			},
            arr2string(a) {
                let s = a.join(",")
                return s;
            },
            popoverShow(ele, content) {
				$(ele).attr({
					'data-toggle': 'popover',
					'data-content': content
				})
				$(ele).popover('show')
				setTimeout(function() {
					$(ele).popover('destroy')
				}, 1000)
			},
			addbypass() {
				this.reset()
				this.type='add'
				this.result = ''
				this.edit_data={}
				$("#bypassmodal").modal('show')
			},
			addgroup(data) {
				SystemService.doBypass(data)
				.then((res)=>{
					res=JSON.parse(res)
					if (res.errcode === 0) {
						this.edit_data={}
						this.result = 'ok'
						this.getBypass()
					} else {
						this.result = 'error'
						this.errorMsg=res.errorMessage
					}
				})
			},
			modalEvent(val) {
				if (val.group&&val.group!=='""'||val.oper=='del') {
					this.result='ing'
					let params=JSON.parse(JSON.stringify(val))
					if (val.oper=='del') {
						params.group=val.groups
					} else {
						params.group=params.group.substring(2,params.group.length)
					}
					this.addgroup(params)
				} else {
					this.result='error'
					this.errorMsg='线路不能为空'
				}
			}	
		}
	}
</script>